<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计分析
            <small>产品销量排行</small>
        </h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 1000px;height:600px;"></div>
            <%--固定第二步--%>
        </div>
    </section>
</div>
</body>

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<%--第一步--%>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    $.get("/stat/getSellDataTen.do", function (data) {
        //组装x轴的数组
        var xarr = []
        //组装y轴的数组
        var yarr = []
        for (var i = 0; i < data.length; i++) {
            xarr[i] = data[i].name;
            yarr[i] = data[i].value;
        }

        option = {
            backgroundColor: '#18163B',
            grid: {
                top: '15%',
                right: '3%',
                left: '5%',
                bottom: '12%'
            },
            xAxis: [{
                type: 'category',
                color: '#59588D',
                data: xarr,
                axisPointer: {
                    type: 'line'
                },
                axisLine: {
                    lineStyle: {
                        color: '#272456'
                    }
                },
                axisLabel: {
                    margin: 20,
                    color: '#59588D',
                    textStyle: {
                        fontSize: 12
                    },
                },
            }],
            yAxis: [{
                min: 0,
                max: 100000,
                axisLabel: {
                    formatter: '{value}',
                    color: '#59588D',
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#272456'
                    }
                }
            }],
            series: [{
                type: 'bar',
                data: yarr,
                barWidth: '20px',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#41E1D4' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#10A7DB' // 100% 处的颜色
                        }], false),
                        barBorderRadius: [30, 30, 0, 0],
                        shadowColor: 'rgba(0,255,225,1)',
                        shadowBlur: 4,
                    }
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 30,
                        width: 80,
                        height: 30,
                        backgroundColor: '#252453',
                        borderRadius: 200,
                        position: ['-8', '-60'],
                        distance: 1,
                        formatter: [
                            '    {d|●}',
                            ' {a|{c}}     \n',
                            '    {b|}'
                        ].join(''),
                        rich: {
                            d: {
                                color: '#3CDDCF',
                            },
                            a: {
                                color: '#fff',
                                align: 'center',
                            },
                            b: {
                                width: 1,
                                height: 30,
                                borderWidth: 1,
                                borderColor: '#234e6c',
                                align: 'left'
                            },
                        }
                    }
                }
            }]
        };



        myChart.setOption(option);
    });


    /*var option = {
          title: {
              text: '销售排行榜'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: xarr,
              axisLabel:{
                  rotate:70,
              }
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: yarr,
          }]
      };*/

</script>

</html>